import * as THREE from 'three';
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import './style.css';

// 首先创建场景
const scene = new THREE.Scene();

// 创建相机（角度，宽高比，可视距离区间）设置视锥体尺寸
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机xyz的位置
camera.position.set(0, 0, 10);

// 给场景添加摄像机
scene.add(camera);

// 建一个立方缓冲几何体，立方体的方法是new THREE.BoxGeometry(x,y,z);
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建几何体的材质
const material = new THREE.MeshLambertMaterial({
  color: 0xff6600, //设置材质颜色
  transparent: true, //开启透明
  opacity: 0.9, //设置透明度
});

// 物体需要几何体和材质来创建，把新建的立方体和材质，创建网格的风格创建出来
const cube = new THREE.Mesh(geometry, material);

// 把网格添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 指定渲染器的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

// 创建轨道控制器，并让轨道控制器调用摄像机，和渲染器的dom元素
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器（坐标轴的长度）
// axes:轴 helper:辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); // 把坐标轴添加到场景中

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.position.set(0, 400, 0); //点光源放在x轴上

ambientLight.intensity = 2.0; //光照强度
// ambientLight.intensity = 50000.0; //光照强度

scene.add(ambientLight);

// 渲染函数
// 定义一个变量来跟踪是否向左移动
let isMovingToLeft = false;
function animate() {
  controls.update();
  // 当 x 的值大于等于 5 时，改变移动方向
  if (cube.position.x >= 5) {
    isMovingToLeft = true;
  }
  // 当 x 的值小于等于 0 时，改变移动方向
  else if (cube.position.x <= 0) {
    isMovingToLeft = false;
  }

  // 根据移动方向增减 x 的值
  if (isMovingToLeft) {
    cube.position.x -= 0.01;
  } else {
    cube.position.x += 0.01;
  }
  // 渲染场景
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用render函数
  requestAnimationFrame(animate);
}

animate();
